//接口地址
var url_h = "http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city="
//当前查看天气
var now_tq = 0;

//初始化界面
$(function(){
    $("#lishi").children().first().click(); //加载第一个历史记录城市
})

//点击搜索框变长
$("#sosuo>input").click(function () {
    $("#sosuo").attr('style', 'width:30%');
})
$("#sosuo>input").blur(function () {
    $("#sosuo").attr('style', 'width:20%');
})

//点击历史记录搜索

$("body").on("click","#lishi>div",function () {//使动态添加的元素也能搜索
    qingqiu($(this).children().eq(0).text()); //搜索城市

})

//删除历史记录
// $("#aaa").click(function () { 
//     $(this).parent().remove();
// })
$("body").on("click", "#aaa", function () { //使动态添加的元素也能删除
    $(this).parent().remove();
});

//点击搜索
$("#sosuo>div>button").click(function () {
    var input_n = "";
    if ($('input[name="ChengS"]').val() != "") {
        var input_n = $('input[name="ChengS"]').val();
        qingqiu(input_n); //搜索城市

        //添加标题栏div
        var html = "";
        html = `
            <div>
                <p>${input_n}</p>
                <button id="aaa">X</button>
            </div>
            `;
        //插入页面
        $("#lishi").append(html);

    } else alert("要输点什么啊！");
});

//按下回车键搜索
$(document).keydown(function (event) {
    if (event.keyCode == 13) $("#sosuo>div>button").trigger('click');
});

//点击其他日期天气切换
$("#weilai>div").click(function () {
    $(this).addClass("ww").siblings().removeClass();
    now_tq = $(this).index(); //获取当前元素是第几个
    qingqiu($(".a2").text());
})


function qingqiu(input_n) { //请求城市天气数据
    //请求数据
    $.ajax({
        url: url_h + input_n, //请求路径
        type: "GET", //请求方式

        //请求成功后执行
        success: function (data) {

            //布局返回数据
            var i = 0; //记录返回的七天第几天

            //历遍输出每天的数据
            $.each(data.newslist, function (index, foo) {
                if (now_tq == i) {

                    $("#tupian>div>img").attr("src", "img/" + foo.weatherimg);

                    $(".a1").text("" + foo.date);
                    $(".a2").text("" + foo.area);
                    $(".a3").text("" + foo.weather);

                    $(".b1").text("" + foo.real);

                    $(".b2 div").eq(0).text("最高温度：\n" + foo.highest);
                    $(".b2 div").eq(1).text("最低温度：" + foo.lowest);

                    $(".b3 div").eq(0).text("风向：" + foo.wind);
                    $(".b3 div").eq(1).text("风向角度：" + foo.winddeg);
                    $(".b3 div").eq(2).text("风速：" + foo.windspeed);
                    $(".b3 div").eq(3).text("风力：" + foo.windsc);

                    $(".b4").text("" + foo.tips);

                    $(".c1 div").eq(0).text("日出：" + foo.sunrise);
                    $(".c1 div").eq(1).text("日落：" + foo.sunset);
                    $(".c1 div").eq(2).text("月升：" + foo.moonrise);
                    $(".c1 div").eq(3).text("月落：" + foo.moondown);

                    $(".c2 div").eq(0).text("降雨概率：" + foo.pop+"%");
                    $(".c2 div").eq(1).text("降雨量：" + foo.pcpn+" 毫米");
                    $(".c2 div").eq(2).text("相对湿度：" + foo.humidity+"%");

                    $(".c3 div").eq(0).text("紫外线强度指数：" + foo.uv_index);
                    $(".c3 div").eq(1).text("能见度：" + foo.vis + " 千米");
                }

                $("#weilai").children().eq(i).children().eq(0).text(foo.date + " " + foo.week);
                $("#weilai").children().eq(i).children().eq(1).children().attr("src", "img/" + foo.weatherimg);
                $("#weilai").children().eq(i).children().eq(2).text(foo.highest);
                $("#weilai").children().eq(i).children().eq(3).text(foo.lowest);
                $("#weilai").children().eq(i).children().eq(4).text(foo.weather);
                
                i++;
            })
        },
        //若请求出错则执行
        error: function () {
            alert("没查到……");
        },
        dataType: "json" //设置接受数据格式为 text
    })
}